<template>
	<view>
		<view class="view-ipt">
			<text class="title">手机号</text>
			<input placeholder="请输入手机号" type="text">
		</view>
		<view class="view-ipt">
			<text class="title">验证码</text>
			<input placeholder="请输入验证码" type="text">
			<text class="code">获取验证码</text>
		</view>
		<view class="view-ipt">
			<text class="title">密  码</text>
			<input placeholder="请输入密码" type="text">
		</view>
		<view class="view-ipt">
			<text class="title">密  码</text>
			<input placeholder="请再次输入密码" type="text">
		</view>
		
		<view class="btn">
			<view class="confirm">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: ''
			}
		},

		methods: {
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
	.view-ipt {
		height: 100rpx;
		border-top: 1rpx solid #f7f7f7;
		background-color: #FFF;
		
		.title {
			display: inline-block;
			width: 120rpx;
			text-align: center;
			position: relative;
			font-size: 28rpx;
			top: -36rpx;
		}
		
		.code {
			font-size: 28rpx;
			color: #2636B2;
			display: inline-block;
			position: relative;
			top: -30rpx;
		}
		
		input {
			width: 400rpx;
			display: inline-block;
			height: 100rpx;
			font-size: 28rpx;
			margin-left: 60rpx;
		}
	}
	
	.btn {
		width: 600rpx;
		margin: auto;
		margin-top: 160rpx;
		
		view {
			width: 600rpx;
			height: 88rpx;
			border-radius: 10rpx;
			text-align: center;
			line-height: 88rpx;
		}
		
		.confirm {
			background-image: linear-gradient(#1D2DA7,#5F72FD);
			color: #FFF;
		}
	}
</style>
